<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-bind绑定class语法(掌握)</title> 
  <style>
    .active {
      color: red;
    }
  </style>
  <style>
    .active_aqua {
      color: aqua;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 1. 基本绑定-->
    <h2 :class="isActive ? 'active' : '' "> Hello class</h2>
    <!-- 2. 动态绑定class可以写对象语法-->
    <button class="active" @click="btnClick"> 我是按钮1 </button><br>
    <button :class="isActive ? 'active' : '' " @click="btnClick"> 我是按钮2 </button><br> <!--比较复杂,使用下面的对象语法-->
    <!-- 2.1 对象语法的基本使用-->
    <!--<button :class="{key : value}" @click="btnClick"> 我是按钮 </button> 这里的value是boolean类型, 如果value是true,返回key,否则返回空--> 
    <button :class="{active : isActive}" @click="btnClick"> 我是按钮3 </button><br>
    <!-- 2.2 对象语法的多个键值对-->
    <button :class="{active_aqua: is_active_aqua, why: true, kobe: false}" @click="btn_active_aqua">我是按钮4</button><br>
    <!-- 2.3 动态绑定的class是可以和普通的class并列同时使用的-->
    <button class="abc cba" :class="{active_aqua: is_active_aqua, why: true, kobe: false}" @click="btn_active_aqua">我是按钮5</button><br>
    <!-- 2.3 动态绑定的class, 抽取对象放在方法里面-->
    <button class="abc cba" :class="getDynamicClasses()" @click="btn_active_aqua">我是按钮6</button>
    <!-- 3. 动态class可以写成数组-->
    <h2 :class="['abc', 'cba']"> Hello Array </h2>
    <h2 :class="['abc', className]"> Hello Array </h2>
    <h2 :class="['abc', isActive? 'active' : '']"> Hello Array </h2> <!--三元运算-->
    <h2 :class="['abc', {active: isActive}]"> Hello Array </h2> <!--对象语法-->
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 使用vue
    const app = Vue.createApp({
      data: function(){
        return {
          name: "Hello v-memo"
          , classes: "abc cba nba"
          , isActive: false
          , is_active_aqua: false
          , className: "cba"
        }
      }
      ,methods: {
        btnClick: function() {
          this.isActive = !this.isActive
        }
        ,btn_active_aqua: function() {
          this.is_active_aqua = !this.is_active_aqua
        }
        , getDynamicClasses: function() {
          // this.is_active_aqua = !this.is_active_aqua
          return {active_aqua: this.is_active_aqua, why: true, kobe: false}
        }
      }
    }
    )
    // 挂载 
    app.mount("#app")
    
  </script>

</body>
</html>
